ngTemplate

Descripcion

Como utilizar ngTemplate para mostrar plantillas bajo ciertas condiciones

Codigo de Ejemplo
Descripcion

Para utilizar el ngTemplate lo podemos hacer de la siguiente manera:

Tenemos un array personas que inicialmente esta vacio y a traves de la funcion nuevaPersona ser ira llenando, si el array esta vacio se muestra el template y si no se muestra el listado del array:

<p>personas works!</p>

<button (click)="nuevaPersona()">Añadir Persona</button>

<div *ngIf="personas.length > 0 else sinPersonas">Listado personas:

    <ul>
        <li *ngFor="let i of personas">{{i}}</li>
    </ul>

</div>

<ng-template #sinPersonas><p>No hay personas</p></ng-template>

En este caso usamos el ngIf para evaluar si el array personas tiene contenido, si lo tiene usamos el ngFor para mostrar el array

Si el array personas no tiene contenido el else activa la etiqueta sinPersonas esta etiqueta esta definida dentro del ng-template (#sinPersonas) y hará que se muestre el contenido de esa plantilla.

Tags

Angular | ngTemplate